<template>
	<div class="inner_chart">
		<uni-echarts :ref="'echarts'+index" :option="optionEValue" :canvasId="'echarts'+index">
		</uni-echarts>
	</div>
</template>

<script>
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				optionEValue: {
					title: {
						text: '单位：千瓦时',
						left: "4%",
						top: "0px",
						textStyle: {
							color: "#fff",
							fontSize: 12
						}
					},
					grid: {
						left: "5%",
						top: "20%",
						width: "90%",
						height: "75%",
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false
						},
						axisLabel: {
							color: "#fff"
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						data: ["11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时",
							"00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时"
						],
					},
					yAxis: {
						type: 'value',
						padding: 5,
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(255, 255, 255, 0.2)",
								type: "solid"
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "rgba(255,255,255,.3)",
								type: "solid"
							}
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#fff"
							}
						},
					},
					series: {
						type: 'line',
						smooth: true,
						symbolSize: 5,
						showSymbol: false,
						itemStyle: {
							normal: {
								color: "#38D0FB",
								lineStyle: {
									color: "#38D0FB",
									width: 2
								}
							}
						},
						areaStyle: {
							normal: {
								color: {
									colorStops: [{
										offset: 0,
										color: "rgba(0,150,255,0.8)"
									}, {
										offset: 1,
										color: "rgba(56,208,251,0.2)"
									}],
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									type: "linear",
									global: false
								}
							}
						}
					}
				}
			}
		},
		props: {
			seriesData: Array,
			index: Number
		},
		methods: {

		},
		mounted() {
			this.optionEValue.series.data = this.seriesData;
		}
	}
</script>

<style>
</style>
